<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商户-未通过</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/merchant.css">
</head>

<body>
    <div id="uniocn">
                <div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
                    <button class="layui-btn layui-btn-ms">商户列表</button>
                </div>
                <div style="box-sizing: border-box;padding:15px;background: #fff;margin-top: 15px">
                    <table class="layui-table" style="text-align: center">
                        <colgroup>
                            <col width="20%">
                            <col width="20%">
                            <col width="20%">
                            <col width="20%">
                            <col width="20%">
                        </colgroup>
                        <tr>
                            <th style="text-align: center">商户名称/用户昵称</th>
                            <th style="text-align: center">联系人</th>
                            <th style="text-align: center">申请时间</th>
                            <th style="text-align: center">申请状态</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        <tr v-for="(item,index) in tableData">
                            <td>
                                <div>
                                    <p>{{item.businessName}}</p>
                                    <button class="layui-btn layui-btn-xs" style="background: #23C6C8">{{item.userName}}</button>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <p>{{item.shopowner}}</p>
                                    <button class="layui-btn layui-btn-xs" style="background: #23C6C8">{{item.phone}}</button>
                                </div>
                            </td>
                            <td>
                                <p>{{item.time}}</p>
                            </td>
                            <td>
                                <button class="layui-btn layui-btn-sm" style="background: #23C6C8">{{item.states}}</button>
                            </td>
                            <td style="color: #3E85C0;">
                                <button class="layui-btn layui-btn-sm">通过</button>
                                <button class="layui-btn layui-btn-sm" style="background: #ED5565">驳回</button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" @click='delTable(index)'>删除</button>
                            </td>
                        </tr>
                    </table>
                    <div class="tabBox">
                        <div id="businessPage"></div>
                    </div>
                </div>
    </div>

    <script src="layui/layui.js"></script>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/vue2.5.16.js"></script>
    <script src="./js/public.js"></script>
    <script src="./js/data.js"></script>
    <script>
        layui.use(['laypage','layer'], function () {
            var laypage = layui.laypage; 
             var layer = layui.layer;
            //执行一个laypage实例
            laypage.render({
                elem: 'businessPage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: 50 //数据总数，从服务端得到
            });
        });
        new Vue({
            el: "#uniocn",
            data: {
                header: data.header,
                side: data.side,
                tableData: [
                    {
                        businessName: "勇气", userName: '这就是昵称', shopowner: "李白", phone: "13600009999", time: "2018-12-23 12:00:00", states: "待审核",
                    }, {
                        businessName: "勇气", userName: '这就是昵称', shopowner: "李白", phone: "13600009999", time: "2018-12-23 12:00:00", states: "待审核",
                    }
                ]
            },
            methods: {
                //删除
                delTable: function (index) {
                    var that = this;
                    layer.confirm('确定删除吗?', {
                        btn: ['确认', '取消'] //按钮
                    }, function () {
                        that.tableData.splice(index, 1)
                        layer.msg('删除成功', { icon: 1 });
                    }, function () {
                        layer.msg('取消了删除', { icon: 0 });
                    });
                }
            },
        })
        
    </script>
</body>

</html>